<template>
  <div>
    <input type="text" v-model="name" placeholder="请输入名字">
    <button @click="add">添加</button>
    <ul>
        <li v-for="person in PersonList" :key="person.id">{{person.name}}</li>
    </ul>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
import {mapState} from 'vuex'
export default {
name: 'PersonTest',
data() {
    return {
        name: '',
    }
},
computed:{
    ...mapState(['PersonList']),
},
methods:{
    add(){
        const personobj={id:nanoid(),name:this.name}
        this.$store.commit('ADDPERSON',personobj)
    }
}
}
</script>

<style>

</style>